<template>
    <div class="p-[20px]">



        <el-form label-width="170px">
            <el-row>
                <el-col>
                    <el-form-item label="广告类型" prop="type">
                        <el-input disabled v-model="form.type" placeholder="" clearable />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="投放部门" prop="deptName">
                        <el-input disabled v-model="form.deptName" placeholder="" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="投放员工" prop="employeeName">
                        <el-input disabled v-model="form.employeeName" placeholder="" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>



        <el-form label-width="170px" v-if="type == 1 || type == 2">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告发布的范围">
                        <el-select v-model="scope" placeholder="请输入广告发布的范围" filterable clearable>
                            <el-option v-for="i in scopeList" :label="i.label" :value="i.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告投放到列表的位置">
                        <el-select v-model="positionList" placeholder="请输入广告投放到列表的位置" multiple clearable>
                            <el-option v-for="i in arr" :label="i.title" :value="i.type" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">提 交</el-button>
            </div>
        </el-form>

        <el-form label-width="170px" v-if="type == 3">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告发布的范围">
                        <el-select v-model="scope" placeholder="请输入广告发布的范围" filterable clearable>
                            <el-option v-for="i in scopeList" :label="i.label" :value="i.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告投放到列表的位置">
                        <el-select v-model="positionList" placeholder="请输入广告投放到列表的位置" multiple clearable>
                            <el-option v-for="i in arr" :label="i.title" :value="i.type" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告投放到品类的位置">
                        <el-select v-model="systemProductCategoryIdList" placeholder="请输入广告投放到品类的位置" multiple clearable>
                            <el-option v-for="i in categoryIdListCate" :label="i.name"
                                :value="i.systemProductCategoryId" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">提 交</el-button>
            </div>
        </el-form>

        <el-form label-width="170px" v-if="type == 4">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告发布的范围">
                        <el-select v-model="scope" placeholder="请输入广告发布的范围" filterable clearable>
                            <el-option v-for="i in scopeList" :label="i.label" :value="i.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告投放到列表的位置">
                        <el-select v-model="positionList" placeholder="请输入广告投放到列表的位置" multiple clearable>
                            <el-option v-for="i in arr" :label="i.title" :value="i.type" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告投放到品类的位置">
                        <el-select v-model="systemProductCategoryIdList" placeholder="请输入广告投放到品类的位置" multiple clearable>
                            <el-option v-for="i in categoryIdListCate" :label="i.name"
                                :value="i.systemProductCategoryId" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="广告竞价排名的位置">
                        <el-select v-model="rankList" placeholder="广告竞价排名的位置" multiple clearable>
                            <el-option v-for="i in sortArr" :label="i.label" :value="i.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">提 交</el-button>
            </div>
        </el-form>
        <div v-else>
        </div>





    </div>

</template>

<script setup>
let categoryIdList = []
let categoryIdListCate = ref([])

// import { useRouter } from 'vue-router';
const router = useRouter()

const scopeList = [
    { label: "所在地一公里内发布", value: 1 },
    { label: "所在区县内发布", value: 2 },
    { label: "所在市内发布", value: 3 },
    { label: "所在省内发布", value: 4 },
    { label: "所在全国内发布", value: 5 },
]


let arr = []
const arr1 = [
    { title: "用户端云平台界面头条位", type: 1, checked: false },
    { title: "用户端云平台界面次条位", type: 2, checked: false },
    { title: "用户端医疗机构界面头条位", type: 3, checked: false },
    { title: "用户端医疗机构界面次条位", type: 4, checked: false },
    { title: "用户端护工抢单界面头条位", type: 5, checked: false },
    { title: "用户端护工抢单界面次条位", type: 6, checked: false },
    { title: "用户端状态查询界面头条位", type: 7, checked: false },
    { title: "用户端状态查询界面次条位", type: 8, checked: false },
    /*  */
    { title: "管理端医疗机构界面头条位", type: 9, checked: false },
    { title: "管理端医疗机构界面次条位", type: 10, checked: false },
    { title: "管理端日常经营界面头条位", type: 11, checked: false },
    { title: "管理端日常经营界面次条位", type: 12, checked: false },
    { title: "管理端生产物流界面头条位", type: 13, checked: false },
    { title: "管理端生产物流界面次条位", type: 14, checked: false },
];
const arr2 = [
    { title: "用户端云平台界面图片位", type: 1, checked: false },
    { title: "用户端医疗机构界面图片位", type: 2, checked: false },
    { title: "用户端护工抢单界面图片位", type: 3, checked: false },
    { title: "用户端状态查询界面图片位", type: 4, checked: false },
    /*  */
    { title: "管理端医疗机构界面图片位", type: 5, checked: false },
    { title: "管理端日常经营界面图片位", type: 6, checked: false },
    { title: "管理端生产物流界面图片位", type: 7, checked: false },
];
const arr3 = [
    /*  */
    { title: "用户端护工抢单界面商品列表", type: 2, checked: false },
    { title: "用户端状态查询界面商品列表", type: 3, checked: false },
    { title: "用户端我的信息界面商品列表", type: 4, checked: false },
    /*  */
    { title: "管理端医疗机构界面商品列表", type: 5, checked: false },
    { title: "管理端业务拓展界面商品列表", type: 6, checked: false },
    { title: "管理端日常经营界面商品列表", type: 7, checked: false },
    { title: "管理端生产物流界面商品列表", type: 8, checked: false },
    { title: "管理端我的信息界面商品列表", type: 9, checked: false },
];

let sortArr = [
    {
        label: "第一位",
        value: 1
    },
    {
        label: "第二位",
        value: 2
    },
    {
        label: "第三位",
        value: 3
    }, {
        label: "第四位",
        value: 4
    },
]

import { ElMessage } from 'element-plus'



import {
    advertisementRuleApiruleupdate,
    advertisementRuleApirule
} from "@/api/backAdvertisementRule/backAdvertisementRule.js";

import {
    categoryListNormal,
    categoryListSpecial,

    ruleCategory,
    ruleCategoryChange,

    rulePosition,
    rulePositionChange,

    ruleScope,
    ruleScopeChange,

    ruleSort,
    ruleSortChange,
} from "@/api/backAdvertisementRule/backAdvertisementRule.js";

import { useRoute } from 'vue-router';



const { proxy } = getCurrentInstance()
const route = useRoute()


let title = ''
const type = ref(1)
watch(route, () => {
    if (route.meta.title == '滚动字幕') {
        title = '滚动字幕'
        type.value = 1
    } else if (route.meta.title == '滚动图片') {
        title = '滚动图片'
        type.value = 2
    } else if (route.meta.title == '特价新品') {
        title = '特价新品'
        type.value = 3
    } else if (route.meta.title == '普通商品') {
        title = '普通商品'
        type.value = 4
    }
}, { immediate: true })


console.log(route.meta.title, "route.meta.title");


const form = ref({})
const getList = async () => {
    let typcccce = 1
    let re = {
        "deptName": "",
        "employeeName": "",
        "type": "",
        "categoryList": [],
        "positionList": [],
        "scopeList": [],
        "sortList": [],
    }
    let res = null


    if (type.value == 1) {
        re = await advertisementRuleApirule(type.value)
        scope.value = scopeList.find(i => i.value == re.scopeList)
        positionList.value = re.positionList

    } else if (type.value == 2) {
        re = await advertisementRuleApirule(type.value)
        scope.value = scopeList.find(i => i.value == re.scopeList)
        positionList.value = re.positionList
    } else if (type.value == 3) {
        typcccce = 1
        categoryIdListCate.value = await categoryListSpecial()
        re = await advertisementRuleApirule(type.value)
        scope.value = scopeList.find(i => i.value == re.scopeList)
        positionList.value = re.positionList
        systemProductCategoryIdList.value = re.categoryList
    } else if (type.value == 4) {
        typcccce = 2
        categoryIdListCate.value = await categoryListNormal()
        re = await advertisementRuleApirule(type.value)
        scope.value = scopeList.find(i => i.value == re.scopeList)
        positionList.value = re.positionList
        systemProductCategoryIdList.value = re.categoryList
        rankList.value = re.sortList
    }


    form.value = re
}

onMounted(() => {
    getList()
})


const systemProductCategoryIdList = ref([])
const positionList = ref([])
const scope = ref('')
const rankList = ref([])


function setArr() {
    if (type.value == 1) {
        arr = arr1;
    } else if (type.value == 2) {
        arr = arr2;
    } else {
        arr = arr3;
    }
}
setArr()

const submitForm = async () => {
    let data = {
        "rankList": rankList.value,
        "systemProductCategoryIdList": systemProductCategoryIdList.value,
        "positionList": positionList.value,
        "scope": scope.value,
        "type": type.value
    }
    await advertisementRuleApiruleupdate(data)
    ElMessage.success({
        message: "成功"
    })
    // if (type.value == 1) {
    //     await advertisementRuleApiruleupdate(data)
    //     ElMessage.success({
    //         message: "成功"
    //     })
    // } else if (type.value == 2) {
    //     await advertisementRuleApiruleupdate(data)
    //     ElMessage.success({
    //         message: "成功"
    //     })
    // } else if (type.value == 3) {
    //     await advertisementRuleApiruleupdate(data)
    //     ElMessage.success({
    //         message: "成功"
    //     })
    // } else if (type.value == 4) {
    //     await advertisementRuleApiruleupdate(data)
    //     ElMessage.success({
    //         message: "成功"
    //     })
    // }
}


</script>
<style lang='scss' scoped></style>